<template>
  <view class="contaier">
    <view
      class="head flex-col flex-y-center flex-x-center"
      :style="'background:' + color"
      v-if="odinfo.order.type == '3'"
    >
      <view class="zwxx" v-if="odinfo.table2"
        >桌位类型：{{ odinfo.table2.name }}</view
      >
      <view class="head1" v-if="odinfo.order.yy_state == '2'">待确认</view>
      <view class="head1" v-if="odinfo.order.yy_state == '3'">已通过</view>
      <view class="head1" v-if="odinfo.order.yy_state == '4'">已拒绝</view>
    </view>
    <view class="ddinfo">
      <view class="formbd">
        <view class="formft">
          <view class="weui-cells__title headtitle">订单详情</view>
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
              <view class="weui-cell__bd">订单号</view>
              <view class="weui-cell__ft">
                {{ odinfo.order.order_num }}
                <text
                  @tap="copyText"
                  class="copy"
                  :data-text="odinfo.order.order_num"
                  >复制</text
                >
              </view>
            </view>
            <view class="weui-cell">
              <view class="weui-cell__bd">支付方式</view>
              <view class="weui-cell__ft" v-if="odinfo.order.pay_type == '1'"
                >微信支付</view
              >
              <view class="weui-cell__ft" v-if="odinfo.order.pay_type == '2'"
                >余额支付</view
              >
              <view class="weui-cell__ft" v-if="odinfo.order.pay_type == '4'"
                >货到付款</view
              >
              <view class="weui-cell__ft" v-if="odinfo.order.pay_type == '5'"
                >餐后支付</view
              >
            </view>
            <view class="weui-cell">
              <view class="weui-cell__bd">下单时间</view>
              <view class="weui-cell__ft">{{ odinfo.order.time }}</view>
            </view>
          </view>
        </view>
        <navigator
          class="flex-row flex-y-center sjname"
          openType="redirect"
          :url="'../seller/index?sjid=' + odinfo.store.id"
        >
          <image :src="odinfo.store.logo"></image>
          <view class="flex-grow-1">
            {{ odinfo.store.name }}
          </view>
          <view class="flex-grow-0 flex-y-center">
            <image
              src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"
              style="width: 40rpx; height: 40rpx"
            ></image>
          </view>
        </navigator>
        <view
          class="cart-item flex-row flex-y-center"
          v-for="(item, index) in odinfo.good"
          :key="index"
        >
          <view class="flex-grow-0 flex-y-center">
            <image class="goods-pic" mode="aspectFill" :src="item.img"></image>
          </view>

          <view class="flex-grow-1 flex-col">
            <view class="flex-grow-1">
              <view class="goods-name">{{ item.name }}</view>
              <view class="attr-list">
                <view class="attr-item">{{ item.spec }}</view>
              </view>
            </view>
            <view class="flex-grow-0 flex-row">
              <view class="flex-grow-1 num">×{{ item.number }}</view>
              <view class="flex-grow-0 price">￥{{ item.money }}</view>
            </view>
          </view>
        </view>
        <view class="formftyh">
          <view class="formbdyh flex-row flex-y-center">
            <view class="flex-row flex-y-center flex-grow-1">
              <view class="yhhead jian">定</view>
              <view>预约定金</view>
            </view>
            <view class="flex-grow-0">-￥{{ odinfo.order.deposit }}</view>
          </view>
          <!-- <view class="sfk flex-row flex-y-center">
            <view class="sfk-fv flex-grow-0">实付款</view>
            <view class="flex-grow-1 xiaoji">
              <view></view>
              <view>小计</view>
              <view>￥{{ odinfo.order.money }}</view>
            </view>
          </view> -->
        </view>
        <view class="formft">
          <view class="weui-cells weui-cells_after-title">
            <view
              class="weui-cell weui-cell_access"
              hoverClass="weui-cell_active"
            >
              <view class="weui-cell__bd">预约方式</view>
              <view class="weui-cell__ft" v-if="odinfo.good.length > 0"
                >提前下单</view
              >
              <view class="weui-cell__ft" v-else>只订座</view>
            </view>
            <view
              class="weui-cell weui-cell_access"
              hoverClass="weui-cell_active"
            >
              <view class="weui-cell__bd">预约到店时间</view>
              <view class="weui-cell__ft">{{
                odinfo.order.delivery_time
              }}</view>
            </view>
            <view
              class="weui-cell weui-cell_access"
              hoverClass="weui-cell_active"
            >
              <view class="weui-cell__bd">预约人</view>
              <view class="weui-cell__ft">
                {{ odinfo.order.name }}
                <text v-if="odinfo.order.sex == '1'">(先生)</text>
                <text v-if="odinfo.order.sex == '2'">(女士)</text>
              </view>
            </view>
            <view
              class="weui-cell weui-cell_access"
              hoverClass="weui-cell_active"
            >
              <view class="weui-cell__bd">预约人数</view>
              <view class="weui-cell__ft">{{ odinfo.order.tableware }}人</view>
            </view>
            <view
              class="weui-cell weui-cell_access"
              hoverClass="weui-cell_active"
            >
              <view class="weui-cell__bd">预约电话</view>
              <view class="weui-cell__ft">{{ odinfo.order.tel }}</view>
            </view>
            <view
              class="weui-cell weui-cell_access"
              hoverClass="weui-cell_active"
              v-if="odinfo.order.note != ''"
            >
              <view class="weui-cell__bd" style="min-width: 120rpx">备注</view>
              <view class="weui-cell__ft">{{ odinfo.order.note }}</view>
            </view>
            <view
              @tap="maketel"
              class="weui-cell weui-cell_access btn-group"
              style="
                position: fixed;
                bottom: 20rpx;
                left: 0;
                width: 100vw !important;
                display: flex;
                justify-content: center;
                height: 80rpx;
              "
              :data-tel="odinfo.store.tel"
            >
              <view
                style="
                  display: flex;
                  width: 30%;
                  align-items: center;
                  justify-content: center;
                  padding: 20rpx 30rpx;
                  background: #ccc;
                  border-radius: 40rpx;
                  height: 80rpx;
                "
              >
                <view class="weui-cell__hd">
                  <image
                    src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png"
                    style="vertical-align: middle; width: 30rpx; height: 30rpx"
                  ></image>
                </view>
                <view style="color: #fff" class="weui-cell__bd lxsj"
                  >联系商家</view
                >
              </view>
              <view
                @tap.stop.prevent="location"
                class="weui-cell__ft weui-cell__ft_in-access lxsj"
                style="
                  display: flex;
                  width: 30%;
                  align-items: center;
                  justify-content: center;
                  padding: 20rpx 30rpx;
                  background: #ccc;
                  color: #fff;
                  border-radius: 40rpx;
                  height: 80rpx;
                "
                >地图导航</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import cardlist from '@/ymq_canyino2o/dist/cardlist/index'
import gettel from '@/ymq_canyino2o/dist/gettel/index'
var qqmapsdk
var app = getApp()
var util = require('../../utils/util.js')
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
export default {
  components: {
    cardlist,
    gettel
  },
  data() {
    return {
      color: '#34aaff',

      odinfo: {
        order: {
          type: '',
          yy_state: '',
          deposit: '',
          money: '',
          delivery_time: '',
          tableware: '',
          sex: '',
          tel: '',
          note: '',
          order_num: '',
          pay_type: '',
          time: ''
        },

        table2: {
          name: ''
        },

        store: {
          id: '',
          logo: '',
          name: '',
          tel: ''
        },

        good: []
      }
    }
  },
  onLoad: function (t) {
    app.globalData.setNavigationBarColor(this)
    console.log(t)
    var that = this
    app.globalData.util.request({
      url: 'entry/wxapp/OrderInfo',
      cachetime: '0',
      data: {
        order_id: t.oid
      },
      success: function (t) {
        console.log(t.data)
        that.setData({
          odinfo: t.data
        })
      }
    })
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {},
  methods: {
    maketel: function (t) {
      var o = t.currentTarget.dataset.tel
      uni.makePhoneCall({
        phoneNumber: o
      })
    },

    copyText: function (t) {
      var o = t.currentTarget.dataset.text
      uni.setClipboardData({
        data: o,
        success: function () {
          uni.showToast({
            title: '已复制'
          })
        }
      })
    },

    location: function () {
      var t = this.odinfo.store.coordinates.split(',')
      var o = this.odinfo.store
      console.log(t)
      uni.openLocation({
        latitude: parseFloat(t[0]),
        longitude: parseFloat(t[1]),
        address: o.address,
        name: o.name
      })
    }
  }
}
</script>
<style>
@import './reserveinfo.css';
</style>
